/*
描述：用户注册主组件，处理用户注册逻辑，包括表单验证、API请求和注册成功后的跳转
完成人：何艺珲
完成时间: 2025/04/26
*/
<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import router from "@/router";

const goToLogin = () => {
  router.push('/login');
};

interface UserData {
  username: string;
  password: string;
  email: string;
  nickname: string;
}

// 定义API响应接口
interface ApiResponse {
  msg: string;
  code: number;
  data: null;
}

// 表单数据
const formData = ref<UserData>({
  username: '',
  password: '',
  email: '',
  nickname: ''
});
const repassword = ref<string>('');


// 错误信息状态
const errorMessage = ref<string | null>(null);

// 注册
const handleSignUp = async () => {
  try {
    // 验证表单数据
    if (formData.value.password !== repassword.value) {
      errorMessage.value = '2次密码输入不一致';
      return;
    }

    if (!formData.value.username || !formData.value.password || !formData.value.email || !formData.value.nickname) {
      errorMessage.value = '请完整填写注册信息。';
      return;
    }
    // API请求配置
    const options = {
      method: 'POST' as const,
      url: 'http://localhost:8089/user/register',
      headers: {
        Accept: '*/*',
        'Content-Type': 'application/json'
      },
      data: {
        username: formData.value.username,
        password: formData.value.password,
        email: formData.value.email,
        nickname: formData.value.nickname
      }
    };

    // 发起API请求
    const response = await axios.request<ApiResponse>(options);

    // 检查响应是否成功
    if (response.data.code === 1) {
      // 注册成功，跳转到登录页面
      goToLogin();
      // 清空表单
      formData.value = { username: '', password: '', email: '', nickname: '' };
    } else {
      errorMessage.value = '注册失败，请重试。';
    }
  } catch (error) {
    console.error(error);
    errorMessage.value = '注册过程中发生错误，请重试。';
  }
};
</script>

<template>
  <div class="signup-container">
    <h1>注册</h1>
    <p class="terms">
      点击"注册"即表示你同意已阅读我们的隐私政策、服务和协议。
    </p>
    <!-- 用户名输入 -->
    <label for="username">用户名</label>
    <el-input
        v-model="formData.username"
        style="width: 400px"
        placeholder="请输入用户名"
        clearable
    />

    <!-- 密码输入 -->
    <label for="password">密码</label>
    <el-input
        v-model="formData.password"
        style="width: 400px"
        type="password"
        placeholder="请输入密码"
        show-password
    />
    <!-- 密码输入 -->
    <label for="password">密码</label>
    <el-input
        v-model="repassword"
        style="width: 400px"
        type="password"
        placeholder="请输入密码"
        show-password
    />

    <!-- 邮箱输入 -->
    <label for="email">邮箱</label>
    <el-input
        v-model="formData.email"
        style="width: 400px"
        placeholder="请输入邮箱"
        clearable
    />

    <!-- 昵称输入 -->
    <label for="nickname">昵称</label>
    <el-input
        v-model="formData.nickname"
        style="width: 400px"
        placeholder="请输入昵称"
        clearable
    />

    <!-- 错误信息 -->
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>

    <!-- 注册按钮 -->
    <el-button
        class="signup-button"
        @click="handleSignUp"
    >
      注册
    </el-button>
  </div>
</template>

<style scoped>
.signup-container {
  max-width: 400px;
  padding: 32px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.terms {
  font-size: 11.2px;
  color: #6b7280;
  margin-top: 16px;
  margin-bottom: 24px;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 8px;
}

.error-message {
  color: #ef4444;
  font-size: 14px;
  margin-bottom: 16px;
}

.signup-button {
  width: 400px;
  padding: 12px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
  margin-top: 16px;
}

.signup-button:hover {
  background-color: #2563eb;
}
</style>
